//对话框的类型
let dialogType = "";
//任务id
let id = "";

$(function () {
    //初始化数据
    loadTaskData();

    //点击添加按钮 显示dialog
    $("#btnAdd").on("click", function () {
        showDialog("add");
    });

    //点击dialog背景 隐藏dialog
    $("#dialogBg").on("click", function () {
        hideDialog();
    });

    //点击取消按钮 隐藏dialog
    $("#btnCancel").on("click", function () {
        hideDialog();
    });

    //点击确认按钮
    $("#btnOk").on("click", function () {
        switch (dialogType) {
            case "add":
                //添加任务
                addTask();
                break;
            case "delete":
                //删除任务
                toDeleteTask();
                break;
            case "complete":
                //完成任务
                toCompleteTask();
                break;
        }
    });
});

/**
 * 加载数据
 */
function loadTaskData() {
    //清空表格
    $("#tableTask tr:not(:first)").html("");
    //获取数据
    $.post("http://localhost:8080/todo/selectTask",
        function (data) {
            data.taskBeanList.forEach(function (taskBean) {
                let taskState = "";
                let btnHtml = "";
                if (taskBean.taskState === 0) {
                    taskState = "进行中";
                    btnHtml = "<button onclick='deleteTask(" + taskBean.taskId + ")' " +
                        "style='margin-right: 0.5em'>删除</button>" +
                        "<button onclick='completeTask(" + taskBean.taskId + ")'>完成</button>"
                } else {
                    taskState = "已完成";
                    btnHtml = "<button onclick='deleteTask(" + taskBean.taskId + ")' " +
                        "style='margin-right: 0.5em'>删除</button>"
                }
                const rowItem =
                    "<tr>" +
                    "<td>" + taskBean.taskName + "</td>" +
                    "<td>" + taskBean.taskCreateTime + "</td>" +
                    "<td>" + taskState + "</td>" +
                    "<td>" + btnHtml + "</td>" +
                    "</tr>";
                $("#tableTask tbody:last").append(rowItem)
            })
        },
        "json");
}

/**
 * 添加任务
 */
function addTask() {
    const taskName = $("#inputTaskName").val();
    if (taskName === "") {
        alert("请填写任务名称")
    } else {
        $.post("http://localhost:8080/todo/addTask",
            {"taskName": taskName},
            function (data) {
                if (data.success) {
                    //重新加载数据
                    loadTaskData();
                    hideDialog();
                } else {
                    alert(data.msg)
                }
            },
            "json");
    }
}

/**
 * 删除任务
 */
function toDeleteTask() {
    $.post("http://localhost:8080/todo/deleteTask",
        {"taskId": id},
        function (data) {
            if (data.success) {
                //重新加载数据
                loadTaskData();
                hideDialog();
            } else {
                alert(data.msg)
            }
        },
        "json");
}

/**
 * 完成任务
 */
function toCompleteTask() {
    $.post("http://localhost:8080/todo/completeTask",
        {"taskId": id},
        function (data) {
            if (data.success) {
                //重新加载数据
                loadTaskData();
                hideDialog();
            } else {
                alert(data.msg)
            }
        },
        "json");
}

/**
 * 删除任务
 *
 * @param taskId 任务id
 */
function deleteTask(taskId) {
    id = taskId;
    showDialog("delete");
}

/**
 * 完成任务
 *
 * @param taskId 任务id
 */
function completeTask(taskId) {
    id = taskId;
    showDialog("complete");
}

/**
 * 显示dialog
 *
 * @param type dialog类型
 */
function showDialog(type) {
    dialogType = type;
    $("#dialog").show();
    $("#dialogBg").show();
    const dialogAdd = $("#dialogAddContent");
    const dialogDelete = $("#dialogDeleteContent");
    const dialogComplete = $("#dialogCompleteContent");
    switch (type) {
        case "add":
            dialogAdd.show();
            dialogDelete.hide();
            dialogComplete.hide();
            break;
        case "delete":
            dialogAdd.hide();
            dialogDelete.show();
            dialogComplete.hide();
            break;
        case "complete":
            dialogAdd.hide();
            dialogDelete.hide();
            dialogComplete.show();
            break;
    }
}

/**
 * 隐藏dialog
 */
function hideDialog() {
    $("#dialog").hide();
    $("#dialogBg").hide();
}
